import { FC, useEffect, useState } from "react"
import {Card, Toast, Typography} from "react-vant"
import { createShareCode } from "../../../api"
import QRCode from 'qrcode'
import './index.less'
import { copy } from "../../../utils/utils"
import { FloatingPanel, NavBar, Image } from "antd-mobile"
import { useNavigate } from "react-router-dom"

const Share:FC = () => {

    const navigate = useNavigate()

    const anchors = [window.innerHeight * 0.15, window.innerHeight * 0.5, window.innerHeight * 0.9]
    
    const createMyQrcode = async () => {
        try {
            let res = await createShareCode()
            setShareCode(res.data)
            let url = await QRCode.toDataURL('http://cp.mpsass.com?shareCode='+ res.data)
            console.log(url);
            
            setShareUrl(url)
          } catch (err) {
            console.error(err)
          }
    }

    const [shareUrl, setShareUrl] = useState<string>('')
    const [shareCode, setShareCode] = useState<string>('')

    useEffect(() => {
        createMyQrcode()
    } , [])
    
    return (
        <div className="share h100p">
            <NavBar className='sticky bgfff' onBack={() => navigate(-1)}>我的分享</NavBar>
            <div className="myCode text-center">
                <p className="text-c666 fs17">我的邀请码</p>
                <p className="pt5 text-c999 fs14" onClick={()=>{copy(shareCode);Toast.success('复制成功')}}>
                    <span className="text-warning fs16 pr5">{shareCode}</span>
                </p>
            </div>
            <div className="qrImg text-center">
                <p className="text-c999 fs14">点击右上角分享给朋友或者朋友圈</p>
                <Image width={250} src={shareUrl} />
                <p className="text-c999 fs14">长按二维码保存图片</p>
            </div>
            <FloatingPanel anchors={anchors}>
                <Card round className="px20">
                    <Typography.Text strong type="warning">规则说明</Typography.Text>
                    <Typography.Text className="pt12 text-c999">
                        1.分享方式: 点击右上角分享给朋友或者朋友圈,也可以长按二维码保存图片
                    </Typography.Text>
                    <Typography.Text className="pt12 text-c999">
                        2.只有新用户通过邀请码进入才能记为有效邀请；
                    </Typography.Text>
                    <Typography.Text className="pt12 text-c999">
                        3.通过邀请码进入的用户达到3个, 可获得1次卡; 达到5个, 可获得2次卡;
                    </Typography.Text>
                    <Typography.Text className="pt12 text-c999">
                        4.若被邀请用户开通
                        <Typography.Text type="danger">
                            高级会员
                        </Typography.Text>, 您可以免费获得普通会员权益;
                    </Typography.Text>
                    <Typography.Text className="pt12 text-c999">
                        5.若被邀请用户开通<Typography.Text type="danger">
                            普通会员
                        </Typography.Text>, 您可以获得10次卡;
                    </Typography.Text>
                </Card>
            </FloatingPanel>
        </div>
    )
}
export default Share;
